<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    html,body {
      background: transparent !important;
      /*background-color: #fff;*/
    }
  </style>
</head>
<body>
<div class="use-title">
  Tinkle — 在线帮助教程
</div>
<div class="use-news">
  <li>
    <div class="label">AI写SQL教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/129164959')">
      <div class="img" style="background-image: url('images/1.png')"></div>
      <span>ChatGPT 可收费的那种产品该如何实现？一点尝试</span>
    </a>
  </li>
  <li>
    <div class="label">可视化功能教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/128496722')">
      <div class="img" style="background-image: url('images/2.png')"></div>
      <span>我坦白→低代码功能我有，SQL练习题、数据可视化、数据填充助你高效</span>
    </a>
  </li>
  <li>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/128365237')">
      <div class="img" style="background-image: url('images/3.png')"></div>
      <span>SpringBoot3.0整合chatGPT</span>
    </a>
  </li>
  <li>
    <div class="label">AI写SQL内测教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/128329165')">
      <div class="img" style="background-image: url('images/4.png')"></div>
      <span>chatGPT实战之「基于你的数据库，为你智能生成SQL」</span>
    </a>
  </li>
  <li>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/128349889')">
      <div class="img" style="background-image: url('images/5.png')"></div>
      <span>chatGPT的49种应用场景，双AI生成二次元仙女，及各开发语言对接chatGPT参考指南</span>
    </a>
  </li>
  <li>
    <div class="label">SQL练测功能教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/128257801')">
      <div class="img" style="background-image: url('images/6.png')"></div>
      <span>自动依据你的数据库生成SQL练习题及答案，宝藏软件鉴赏</span>
    </a>
  </li>
  <li>
    <div class="label">在IDEA使用教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/126113240')">
      <div class="img" style="background-image: url('images/7.png')"></div>
      <span>Idea居然还有比Navicat、Datagrid工具还好用、还快的插件，效率又可提升一倍</span>
    </a>
  </li>
  <li>
    <div class="label">本软件实现原理</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/124900266')">
      <div class="img" style="background-image: url('images/8.png')"></div>
      <span>最复杂的Maven打包：多模块、混淆、二次加密、打包exe、分发打包教程</span>
    </a>
  </li>
  <li>
    <div class="label">数据库优化分享</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/125182322')">
      <div class="img" style="background-image: url('images/9.png')"></div>
      <span>必会的这15个Mysql优化问题，面试官、DBA都要高看你一眼</span>
    </a>
  </li>
  <li>
    <div class="label">数据库使用教程</div>
    <a href="javascript:gotoLink('https://blog.csdn.net/luoxueyong/article/details/129021414')">
      <div class="img" style="background-image: url('images/10.png')"></div>
      <span>深度使用国产Bg-Tinkle数据库客户端—太赞了，居然还集成chatGPT AI生成SQL</span>
    </a>
  </li>
</div>

<div class="use-title">
  Tinkle — 常见问题
</div>
<div class="use-qa">
  <li>
    <div class="question">Q1、软件有那些特色功能：</div>
    <div class="answer">软件除基本数据库外，截止目前版本提供了数据可视化、SQL练测、SQL逆代码生成、慢SQL监控、数据填充、数据库文档生成等功能，在后续版本中将提供更多低代码相关的功能。</div>
  </li>
  <li>
    <div class="question">Q2、设置背景图片后无效果：</div>
    <div class="answer">如遇此情况，请修改‘缓存文件路径’为其它盘试试。原因：默认程序会在C:/Users/电脑名/.bg-boom路径存放下载的图片缓存，因此程序需要有操作C盘的权限。</div>
  </li>
  <li>
    <div class="question">Q3、Mac系统打开界面显示乱码：</div>
    <div class="answer">如遇此情况，请在终端使用java -jar madou-database-mysql.jar命令打开软件。原因：软件默认字体，在部分Mac系统中不存在。</div>
  </li>
</div>


<div class="use-title">
  联系我们
</div>
<div class="use-link">
  如果您有任何的（BUG、诉求）信息反馈，可以通过Email: miukoo@126.com  QQ群:565553099 联系我们.
</div>

<div class="use-title">
  友情链接
</div>
<div class="use-link" style="margin-bottom: 30px">
  <a href="javascript:gotoLink('http://gjsm.cn')">—— bg-boom ——</a>
</div>
<style>
  *{padding: 0px;margin: 0px;}
  html,body{overflow-x: hidden}
  .use-title{
    overflow: hidden;
    width: 960px;
    margin: 20px auto 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    font-family: "微软雅黑";
  }
  .use-link{
    overflow: hidden;
    width: 960px;
    margin: 0px auto;
    text-align: center;
    font-size: 13px;
  }
  .use-link a{
    text-decoration: none;
    text-underline: none;
    color: #333333;
  }
  .use-news {
    overflow: hidden;
    width: 960px;
    margin: 0px auto;
  }
  .use-qa {
    overflow: hidden;
    width: 960px;
    margin: 0px auto;
  }
  .use-qa li{
    list-style: none;
    overflow: hidden;
  }
  .question{
    font-size: 14px;
    color: #111111;
  }
  .answer{
    color: #111111;
    padding: 10px;
    background-color: #f6f8fa;
    border-radius: 10px;
    margin: 10px 0px 15px;
    font-size: 13px;
  }
  .use-news li {
    list-style: none;
    background-color: #ffffff;
    border-radius: 5px;
    width: 150px;
    height: 130px;
    float: left;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
  }
  .use-news .label {
    position: absolute;
    right: 0px;
    z-index: 999;
    background-color: rgba(200,0,0,0.5);
    color: #ffffff;
    padding: 3px 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 12px;
  }
  .use-news li:hover{
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
    cursor: pointer;
  }
  .use-news .img{
    width: 100%;
    height: 85px;
    background-size: 100% 100%;
  }
  .use-news a {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
  }
  .use-news span {
    display: block;
    color: #333333;
    margin-top: 5px;
    font-size: 12px;
  }
</style>
<script>
  function gotoLink(link){
    window.madou({
      request: link,
      persistent:false,
      onSuccess: function(response) {
      },
      onFailure: function(error_code, error_message) {
      }
    });
  }
</script>
</body>
</html>
